<script setup>
import { ref } from 'vue'
const props = defineProps({
  dataList: {
    type: Array,
    default: () => [
      {
        acName: 'DUCK 寻宝派对-全国首展',
        acCover:
          'https://img.js.design/assets/img/669fb3b58cf444f273d15664.png#ebe884c8ea0ef3b7a23effda359a54e8',
      },
      {
        acName: 'DUCK 寻宝派对-全国首展22',
        acCover:
          'https://img.js.design/assets/img/669fb3596e8e19d665cafc0c.png#083fdf4abda41c2a719a0288ee61abce',
      },
      {
        acName: 'DUCK 寻宝派对-全国首展33',
        acCover:
          'https://img.js.design/assets/img/669fb2f0f7a96fb05dcc7ca9.png#dbdc00a74c37cc204e50dc37066dbf1a',
      },
    ],
  },
})
const current = ref(0)
const change = (e) => {
  current.value = e.detail.current
  // console.log(e, '29===')
}
</script>

<template>
  <view class="swiper-view">
    <swiper
      class="swiper"
      circular="true"
      previous-margin="164rpx"
      next-margin="164rpx"
      @change="change"
      :current="current"
    >
      <swiper-item class="swiper-item" v-for="(item, i) in dataList" :key="i">
        <image
          :class="current == i ? 'active' : ''"
          :src="item.acCover"
          mode="aspectFill"
        ></image>
      </swiper-item>
    </swiper>
    <view v-if="dataList.length > 0" class="active-name">
      {{ dataList[current]['acName'] }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
.swiper-view {
  margin-top: 40rpx;
}
.swiper {
  height: 564rpx;
  .swiper-item {
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      border-radius: 20rpx;
      width: 80%;
      height: 80%;
      opacity: 0.6;
    }
    .active {
      opacity: 1;
      width: 100%;
      height: 100%;
      transition: 0.5s;
    }
  }
}
.active-name {
  width: 440rpx;
  text-align: center;
  margin: 24rpx auto 30rpx;
  font-size: 28rpx;
  font-weight: 500;
}
</style>
